<template>
  <div>
    <el-input placeholder="search" @focus="jump('/storeSearch')"></el-input>
    <el-carousel :interval="5000" arrow="never" height="100px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
    <el-image style="height:100px;width:100%" :src="url" fit="fill"></el-image>
    <el-row>
      <el-col v-for="(item,i) in items" :key="i" :span="6">
        <div style="text-align: center" @click="jump('/storeClassification')">
          <el-avatar style="display: block;margin: 0 auto" shape="circle" size="small" :src=item.url></el-avatar>
          <span style="font-size: 12px">{{item.tag}}</span></div>
      </el-col>
    </el-row>
    <div style="text-align: center">猜你喜欢</div>
    <el-dropdown>
  <span class="el-dropdown-link">
    综合排序<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>综合排序</el-dropdown-item>
        <el-dropdown-item>好评优先</el-dropdown-item>
        <el-dropdown-item>起送价最低</el-dropdown-item>
        <el-dropdown-item>配送最快</el-dropdown-item>
        <el-dropdown-item>配送费最低</el-dropdown-item>
        <el-dropdown-item>人均从低到高</el-dropdown-item>
        <el-dropdown-item>人均从高到低</el-dropdown-item>
        <el-dropdown-item>通用排序</el-dropdown-item>
      </el-dropdown-menu>
      <span style="margin-left: 20px">距离最近</span>
      <span style="margin-left: 20px">销量最高</span>
      <span style="margin-left: 20px">筛选</span>
    </el-dropdown>
    <el-row :gutter="30">
      <el-col :span="6" v-for="(tag,i) in tags" :key="i">
        <el-button size="small">{{tag}}</el-button>
      </el-col>
    </el-row>
    <el-card shadow="never">
      <el-row :gutter="10" >
        <el-col :span="8">
          <el-image
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
        </el-col>
        <el-col :span="15">
          <p @click="jump('/store')">店铺名称</p>
          <p>起送 ￥10 免配送费</p>
          <p>月售9999+ </p>
          <p>2.69km</p>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-image
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
        </el-col>
        <el-col :span="15">
          <p>店铺名称</p>
          <p>起送 ￥10 免配送费</p>
          <p>月售9999+ </p>
          <p>2.69km</p>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-image
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
        </el-col>
        <el-col :span="15">
          <p>店铺名称</p>
          <p>起送 ￥10 免配送费</p>
          <p>月售9999+ </p>
          <p>2.69km</p>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-image
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
        </el-col>
        <el-col :span="15">
          <p>店铺名称</p>
          <p>起送 ￥10 免配送费</p>
          <p>月售9999+ </p>
          <p>2.69km</p>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-image
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
        </el-col>
        <el-col :span="15">
          <p>店铺名称</p>
          <p>起送 ￥10 免配送费</p>
          <p>月售9999+ </p>
          <p>2.69km</p>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-image
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
        </el-col>
        <el-col :span="15">
          <p>店铺名称</p>
          <p>起送 ￥10 免配送费</p>
          <p>月售9999+ </p>
          <p>2.69km</p>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-image
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
        </el-col>
        <el-col :span="15">
          <p>店铺名称</p>
          <p>起送 ￥10 免配送费</p>
          <p>月售9999+ </p>
          <p>2.69km</p>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                items: [
                    {url: 'https://p1.meituan.net/jungle/8b5e1702d4145ccf058ba5fb31008c5310912.png', tag: '美食'},
                    {url: 'https://p0.meituan.net/jungle/45ff2f098a20a77122bff8385192f0ec10547.png', tag: '超市'},
                    {url: 'https://p1.meituan.net/jungle/12a9834827909fa55f54bce96e67470711250.png', tag: '新鲜果蔬'},
                    {url: 'https://p1.meituan.net/jungle/a2a306c5467aba7fac8d7410d161f8db9364.png', tag: '下午茶'},
                    {url: 'https://p0.meituan.net/jungle/58b60a312cf86f3a3afc4c96ff0e53438774.png', tag: '汉堡披萨'},
                    {url: 'https://p0.meituan.net/jungle/2ec76f8f4f21a4ec163adc7fccfa1a399428.png', tag: '小吃馆'},
                    {url: 'https://p0.meituan.net/jungle/2eee7747fd143249b100b9fa5ee5e31d9873.png', tag: '家常菜'},
                    {url: 'https://p1.meituan.net/jungle/dfd03fd91f640682c16179ba85837f739679.png', tag: '鲜花蛋糕'}
                ],
                tags: ["津贴联盟", "会员红包", "满减优惠", "品质联盟"]
            }
        },
        methods: {
            jump(route) {
                this.$router.push(route);
            },
        },
    }
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  p {
    margin: 0
  }
</style>
